<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 导入基础样式 -->
  <link rel="stylesheet" href="css/base.css">
  <!-- 导入首页样式 -->
  <link rel="stylesheet" href="css/index.css">
  <!-- 导入字体图标 -->
  <link rel="stylesheet" href="fonts/icomoon.css">
  <!-- 设置网页的ico -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

  <script src="./js/jquery-1.12.4.js"></script>

  <!-- 导入echarts -->
  <script src="./js/echarts.min.js"></script>
  <!-- echarts里的中国地图 -->
  <script src="./js/china.js"></script>

  <script src="./js/index.js"></script>
</head>

<body>

  <div class="container">
    <!-- 第一列 -->
    <div class="column">
      <!-- 1.1 设备概览 -->
      <div class="panel overview">
        <div class="inner">
          <div class="item">
            <p>2,190</p>
            <span><i class="icon-dot"></i>设备总数</span>
          </div>
          <div class="item">
            <p>190</p>
            <span><i class="icon-dot"></i>季度新增</span>
          </div>
          <div class="item">
            <p>3,001</p>
            <span><i class="icon-dot"></i>运营设备</span>
          </div>
          <div class="item">
            <p>108</p>
            <span><i class="icon-dot"></i>异常设备</span>
          </div>
        </div>
      </div>


      <!-- 1.2 故障监控 -->
      <div class="panel monitor">
        <div class="inner">
          <!-- tab栏区域 -->
          <div class="tabs">
            <a class="active" href="javascript:">故障设备监控</a>
            <span class="sep">|</span>
            <a href="javascript:">异常设备监控</a>
          </div>

          <!-- 内容区域 -->
          <div class="content active">
            <!-- 标题部分 -->
            <div class="titles">
              <span>故障时间</span>
              <span>故障地址</span>
              <span>故障代码</span>
            </div>
            <!-- 滚动部分 -->
            <div class="carousel">
              <ul>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200001</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200002</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200003</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200004</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200005</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200006</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200007</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200008</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200009</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>2000010</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>2000011</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>2000012</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>2000013</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>2000014</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>2000015</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200001</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200002</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200003</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200004</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200005</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200006</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200007</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200008</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>200009</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>徐焰冰找工作代码</span>
                  <span>2000010</span>
                </li>
              </ul>
            </div>
          </div>

          <!-- 内容区域 -->
          <div class="content">
            <!-- 标题部分 -->
            <div class="titles">
              <span>故障时间</span>
              <span>故障地址</span>
              <span>故障代码</span>
            </div>
            <!-- 滚动部分 -->
            <div class="carousel">
              <ul>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200001</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200002</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200003</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200004</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200005</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200006</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200007</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200008</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200009</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>2000010</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>2000011</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>2000012</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>2000013</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>2000014</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>2000015</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200001</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200002</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200003</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200004</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200005</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200006</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200007</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200008</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>200009</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市龙岗区</span>
                  <span>2000010</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 1.3 点位分布 -->
      <div class="panel point">
        <div class="inner">
          <!-- 标题部分 -->
          <h3>点位分布统计</h3>
          <!-- 图标和数据部分 -->
          <div class="detail">
            <div class="echarts"></div>
            <div class="data">
              <div class="item">
                <p>320,11</p>
                <span><i class="icon-dot"></i>点位分布</span>
              </div>
              <div class="item">
                <p>418</p>
                <span><i class="icon-dot"></i>本月新增</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二列 -->
    <div class="column">
      <!-- 2.1 地图部分 -->
      <div class="map">
        <!-- 标题部分 -->
        <h3><i class="icon-cube"></i>设备数据统计</h3>
        <!-- 图标部分 -->
        <div class="echarts"></div>
      </div>

      <!-- 2.2 用户统计部分 -->
      <div class="panel user">
        <div class="inner">
          <!-- 标题部分 -->
          <h3>全国用户总量统计</h3>
          <!-- 图标和数据部分 -->
          <div class="detail">
            <div class="echarts"></div>
            <div class="data">
              <div class="item">
                <p>120,899</p>
                <span><i class="icon-dot"></i>用户总量</span>
              </div>
              <div class="item">
                <p>248</p>
                <span><i class="icon-dot"></i>本月新增</span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- 第三列 -->
    <div class="column">
      <!-- 3.1 订单 -->
      <div class="panel order">
        <div class="inner">
          <div class="head">
            <a href="javascript:" class="active">365天</a>
            <span class="sep">|</span>
            <a href="javascript:">90天</a>
            <span class="sep">|</span>
            <a href="javascript:">30天</a>
            <span class="sep">|</span>
            <a href="javascript:">24小时</a>
          </div>

          <div class="data">
            <div class="item">
              <p>301,987</p>
              <span><i class="icon-dot"></i>订单量</span>
            </div>
            <div class="item">
              <p>99834</p>
              <span><i class="icon-dot"></i>销售额（万元）</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 3.2 销售额 -->
      <div class="panel sales">
        <div class="inner">
          <div class="head">
            <h3>销售额统计</h3>
            <span class="sep">|</span>
            <a href="javascript:" class="active">年</a>
            <a href="javascript:">季</a>
            <a href="javascript:">月</a>
            <a href="javascript:">周</a>
          </div>
          <div class="echarts"></div>
        </div>
      </div>

      <!-- 3.3 渠道分布和销售进度 -->
      <div class="chanl-prop clearfix">
        <!-- 渠道分布 -->
        <div class="panel channel fl">
          <div class="inner">
            <h3>渠道分布</h3>
            <div class="data clearfix">
              <div class="item fl">
                <p>39<small>%</small></p>
                <span><i class="icon-plane"></i>机场</span>
              </div>
              <div class="item fl">
                <p>39<small>%</small></p>
                <span><i class="icon-bag"></i>商城</span>
              </div>
              <div class="item fl">
                <p>39<small>%</small></p>
                <span><i class="icon-train"></i>地铁</span>
              </div>
              <div class="item fl">
                <p>39<small>%</small></p>
                <span><i class="icon-bus"></i>火车站</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 销售进度 -->
        <div class="panel progress fr">
          <div class="inner">
            <h3>一季度销售进度</h3>

            <div class="echarts">
              <!-- 除了图表还要放span -->
              <div class="loop"></div>
              <span class="value"><b>75</b><small>%</small></span>
            </div>

            <div class="data">
              <div class="item">
                <p>1,321</p>
                <span><i class="icon-dot"></i>销售额</span>
              </div>
              <div class="item">
                <p>150%</p>
                <span><i class="icon-dot"></i>同比增长</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 3.4 热榜 -->
      <div class="panel hot">
        <div class="inner">
          <!-- 全国热榜等级 -->
          <div class="level">
            <h3>全国热榜</h3>
            <div class="list">
              <div class="item">
                <i class="icon-cup1"></i>
                <span>可爱多</span>
              </div>
              <div class="item">
                <i class="icon-cup2"></i>
                <span>娃哈哈</span>
              </div>
              <div class="item">
                <i class="icon-cup3"></i>
                <span>小洋人</span>
              </div>
            </div>
          </div>

          <!-- 各省热销 -->
          <div class="province">
            <div class="title">
              <h3>各省热销</h3>
              <i>// 近30日 //</i>
            </div>
            <div class="data">
              <ul>
                <li class="active"><span class="fl">北京</span><span class="fr">25,179 <i class="icon-up"></i> </span>
                </li>
                <li><span class="fl">河北</span><span class="fr">25,254 <i class="icon-down"></i></span></li>
                <li><span class="fl">上海</span><span class="fr">34,567 <i class="icon-up"></i></span></li>
                <li><span class="fl">江苏</span><span class="fr">23,234 <i class="icon-down"></i></span></li>
                <li><span class="fl">山东</span><span class="fr">45,677 <i class="icon-up"></i></span></li>
              </ul>
              <ul>
                <li><span class="fl">八喜</span><span class="fr">6,080 <i class="icon-up"></i> </span></li>
                <li><span class="fl">小洋人</span><span class="fr">6,724<i class="icon-up"></i></span></li>
                <li><span class="fl">好多鱼</span><span class="fr">2,170 <i class="icon-up"></i></span></li>
                <li><span class="fl">可爱多</span><span class="fr">9,086 <i class="icon-up"></i></span></li>
                <li><span class="fl">哇哈哈</span><span class="fr">8,341 <i class="icon-up"></i></span></li>
                <li><span class="fl">喜之郎</span><span class="fr">7,407 <i class="icon-up"></i></span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>